<template>
  <div class="title_splitter">
    <div
      class="flex items-center border-b-[1px] border-[#5a6779] pb-[13px]"
      :style="{ width }"
    >
      <div
        v-show="showLine"
        class="w-[3px] h-4 rounded mr-2"
        :style="{ backgroundColor: lineColor }"
      ></div>
      <div class="font-bold" :style="{ fontSize, textAlign }">
        {{ props.name }}
      </div>
      <slot name="header"></slot>
    </div>
    <div class="p-[18px]">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  width?: string;
  name: string;
  fontSize?: string;
  showLine?: boolean;
  lineColor?: string;
  textAlign?: string;
}

const props = withDefaults(defineProps<Props>(), {
  width: '100%',
  fontSize: '14px',
  showLine: true,
  lineColor: '#3883FA',
  textAlign: 'left',
});
</script>
